<template>
  <div class="purchase-wrap">
    <div class="bg-leftTop"></div>
    <div class="bg-rightBottom"></div>
    <div :class="['back-wrap',{'iPhonex': $utils.isIphoneX() }]" @click="handleBack"><i class="iconfont icon-back-new"></i>返回</div>
    <div class="member-type first"  @click="handleSelectiveType('once')" :class="memberType === 'once' ? 'pitchType' : '' ">
      <p class="title">艺术馆日会员</p>
      <p class="text">24h/{{bayData[0].amount/100}}元</p>
    </div>
    <div class="member-type" @click="handleSelectiveType('forever')" :class="memberType === 'forever' ? 'pitchType' : '' ">
      <p class="title">艺术馆月会员</p>
      <p class="text">31*24h/{{bayData[1].amount/100}}元</p>
    </div>
    <div class="member-type" @click="handleSelectiveType('season')" :class="memberType === 'season' ? 'pitchType' : '' ">
      <p class="title">艺术馆季会员</p>
      <p class="text">93*24h/{{bayData[2].amount/100}}元</p>
    </div>
    <div class="pay-type-wrap" v-if="memberType">
      <p class="title">请选择支付方式</p>
      <div class="pay-type-item"  @click="payTypeToggle('Alipay')" >
        <div class="left">
          <img src="./assets/alipay1.png" class="logoimg">
          <span class="name">支付宝支付</span>
        </div>
        <div class="iconfont" :class="payType === 'Alipay' ? 'icon-singleselection' : 'icon-singleselection-no' "></div>
      </div>
      <div class="pay-type-item" @click="payTypeToggle('WeChat')" >
        <div  class="left">
          <img src="./assets/we-chat.png" class="logoimg">
          <span class="name">微信支付</span>
        </div>
        <div class="iconfont" :class="payType === 'WeChat' ? 'icon-singleselection' : 'icon-singleselection-no' "></div>
      </div>
      <div class="btn-wrap">
        <div class="cancel" @click="handlecanclePayOrder">取消</div>
        <div class="confirm" @click="handlePayOrder">确认支付</div>
      </div>
    </div>
  </div>
</template>
<script>
  /* eslint-disable*/
  const PayStatus = {
    Bad_Query: 0, 	// 非法查询
    Handling: 1, 		// 处理中
    Success: 2,		 // 成功
    Failed: 3, 		// 失败
  }
  export default {
    data() {
      return {
        payType: 'Alipay',
        memberType: '',
        bayData: [],
        timer: null,
        html:''
      }
    },
    methods: {
      payTypeToggle(type) {
        this.payType = type;
      },
      handleSelectiveType(type) {
        this.memberType = type;
        console.log(this.memberType)
      },
      handleBack() {
        this.$router.back()
      },
      doneCheckStatusPay(payNo, payStatus) {
        if (payStatus === 2) {
          this.$toast('支付成功恭喜您成为会员!');
          setTimeout(() => {
            this.$router.replace('/catalog');
//                this.$yryz.goBack();
          }, 2000)
        } else if (payStatus === 3) {
          this.$toast('嗷哦~支付失败啦 重新试试吧!', {autoClose: 3000});
        }
      },
      checkStatus(payNo) {
        if (this.timer || !payNo) return;
        let count = 0;
        async function _checkStatus() {
          let payStatus = await this.$http.get(`/platform-pay/v1.0/pt/pay-infos/action/pay-status`, { params: {payNo} })
          // 状态是处理中（未及时拿到支付结果），需要多次轮询，按指数递增间隔时间
          if (payStatus === PayStatus.Handling) {
            count++
            this.timer = setTimeout(_checkStatus, Math.pow(2, count - 1) * 100)
          } else {
            this.doneCheckStatusPay(payNo, payStatus);
          }
        }
        _checkStatus()
      },
      async handlePayOrder() {
        let orderType ='';
        let orderAmount='';
        if( this.memberType ==='once'){
          orderType=1;
          orderAmount = this.bayData[0].amount;
        }else if(this.memberType ==='forever'){
          orderType=2;
          orderAmount = this.bayData[1].amount;
        }else {
          orderType=3;
          orderAmount = this.bayData[2].amount;
        };
        let payChannel = this.payType === 'Alipay' ? 1 : 2;
        let params = {
          orderParam: {
            orderAmount,
            orderType,
            payChannel,
          },
          // orderRequest: '/lovelorn/v1.3/pt/museum-orders/action/create-order',
        }
        this.$yryz.payRequest(params).then((res) => {
          if (!res.payNo) {
//            this.$toast('出错' +JSON.stringify(res))
            return;
          }
          this.doneCheckStatusPay(res.payNo, 2)
        }).catch((ex) => {
            this.$toast('用戶支付失败')
//          this.$toast('出错' + JSON.stringify(ex), {autoClose: 10000})
        });
      },
      handlecanclePayOrder() {
        this.memberType = "";
      }
    },
    async mounted() {
      let res = await this.$http.get(`/lovelorn/v1.3/pb/museum-orders/action/buy-vip`);
      this.bayData = res.data.data;
    }
  }
</script>
<style>
  .purchase-wrap {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: url('./assets/page-bg.png') repeat left top;
    background-size: cover;
    overflow: hidden;
  & .back-wrap {
      position: absolute;
      top: 0.8rem;
      left: 0.3rem;
      z-index: 3;
      color: #765c37;
      font-size: 0.3rem;
  & .iconfont.icon-back-new {
      margin-right: 0.1rem;
    }
  }
  & .bg-leftTop {
      position: absolute;
      top: 0;
      left: 0;
      width: 3.17rem;
      height: 6.55rem;
      background: url('./assets/catalog-left-top.png') no-repeat center;
      background-size: contain;
    }
  & .bg-rightBottom {
      position: absolute;
      top: 6.2rem;
      right: 0;
      width: 2.86rem;
      height: 6.02rem;
      background: url('./assets/catalog-right-bottom.png') no-repeat center;
      background-size: contain;
    }
  & .pay-type-wrap {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 5rem;
      background: #fff;
      padding: 0.58rem 0.5rem 0;
      box-shadow: 0px 0px 0.14rem #dfd1bc;
      z-index:99999;
  & .title {
      color: #000;
      font-size: 0.4rem;
      line-height: 1;
      margin-bottom: 0.6rem;
    }
  & .pay-type-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
  & + .pay-type-item {
      margin-top: 0.5rem;
    }
  & .left {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  & .logoimg {
      width: 0.5rem;
      height: 0.5rem;
    }
  & .name {
      font-size: 0.3rem;
      color: #000;
      margin-left: 0.14rem;
    }
  & .iconfont {
      font-size: 0.38rem;
    }
  & .icon-singleselection {
      color: #68de56;
    }
  & .icon-singleselection-no {
      color: #cdcdcd;
    }
  }
  & .btn-wrap {
      font-size: 0.34rem;
      color: #fff;
      line-height: 0.88rem;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0.54rem 0.26rem 0;
      position: relative;
  & .cancel {
      height: 0.88rem;
      border-top-left-radius: 0.44rem;
      border-bottom-left-radius: 0.44rem;
      background: #e8e8e8;
      width: calc(100% - 3.4rem);
      position: absolute;
      left: 0;
      top: 0;
    }
  & .confirm {
      position: absolute;
      right: 0;
      top: 0;
      width: 3.93rem;
      height: 0.88rem;
      background: url('./assets/pay-confirm.png') no-repeat center;
      background-size: contain;
    }
  }
  }
  & .member-type　{
      margin: 0.5rem auto 0 ;
      width: 6.16rem;
      height: 1.89rem;
      background: url('./assets/member-type.png') no-repeat center;
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #765c37;
      position: relative;
      z-index: 3;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  &.first {
     margin-top: 1.5rem;
   }
  &.pitchType {
     background: url('./assets/member-type-cur.png') no-repeat center;
     background-size: cover;
   }
  & .title {
      font-size: 0.42rem;
    }
  & .text {
      font-size: 0.3rem;
    }
  }
  }
</style>
